<template>
  <div class="login_background">
    <div class="login_box">
      <div class="left">
        <h1>智能WEB后台管理系统</h1>
        <p>WEB0.0.1</p>
      </div>
      <div class="right">
        <div class="form_item">
          <div class="label">用户名</div>
          <a-input size="large" v-model:value="phoneNumber" placeholder="请输入账号">
            <!-- <a-icon class="icon-set_one" slot="prefix" type="user" /> -->
          </a-input>
        </div>
        <div class="form_item">
          <div class="label">密码</div>
          <a-input-password size="large" v-model:value="password" placeholder="请输入密码">
            <!-- <a-icon class="icon-set_one" @keyup.native.enter="goLogin" slot="prefix" type="lock" /> -->
          </a-input-password>
        </div>
        <a-button class="btn" @click="goLogin">登录</a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  // import md5 from "js-md5";
  // import qs from 'qs';
  import { reactive, getCurrentInstance, toRefs, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { $axios, $urls } from '/@/api/index.js';

  export default {
    setup() {
      const formData = reactive({
        phoneNumber: '111',
        password: '',
      });
      let currentInstance = getCurrentInstance();
      let goLogin = () => {
        console.log(formData.phoneNumber, formData.password, '=========================');
        $axios
          .post(currentInstance?.appContext.config.globalProperties.$urls.login, {
            phoneNumber: 'formData.phoneNumber',
            password: 'formData.password',
          })
          .then((res: any) => {
            if (!res.errorCode) {
              sessionStorage.setItem('accessToken', res.resultData.token);
              // this.$store.commit("UPDATE_USER_INFO", {
              //   nickname: res.resultData.nickname,
              //   rolePermissions: res.resultData.permisions,
              //   userInfo: res.resultData,
              //   accountType: res.resultData.accountType,
              // });
            }
          })
          .catch((err: any) => {
            // console.log(err, "==========");
          });
      };
      onMounted(() => {
        console.log('setup的挂载', '=========================');
      });
      return {
        ...toRefs(formData),
        goLogin,
      };
    },
  };
</script>

<style lang="less">
  .login_background {
    width: 100%;
    min-width: 1100px;
    height: 100%;
    // background: url("../assets/images/bg.jpg");
    background: #eee;
    position: relative;
    .login_box {
      width: 900px;
      height: 530px;
      display: flex;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      background: #fff;
      .left {
        width: 350px;
        height: 100%;
        // background: url("../assets/images/login_bg.jpg");
        background: #007bc7;
        background-size: 100%;
        box-sizing: border-box;
        padding: 80px 50px;
        h1 {
          font-size: 28px;
          font-weight: 600;
          text-align: left;
          color: #ffffff;
          line-height: 42px;
        }
        p {
          font-size: 14px;
          font-weight: 500;
          text-align: left;
          color: #ffffff;
          line-height: 20px;
          margin-top: 30px;
        }
      }
      .right {
        width: 550px;
        box-sizing: border-box;
        padding: 150px 150px 100px;
        .form_item {
          height: 106px;
          .label {
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            color: #333333;
            line-height: 20px;
            margin-bottom: 8px;
          }
          /deep/.ant-input-lg {
            padding-bottom: 8px;
            font-size: 14px;
          }
        }
        .btn {
          height: 40px;
          background: #007bc7;
          border-radius: 3px;
          color: #fff;
          width: 100%;
          margin-top: 14px;
        }
      }
    }
  }
</style>
